<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram 4.2</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f8f9fa;
  }
  canvas {
    border: 1px solid #dee2e6;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style settings to emulate the original's thick, bold lines
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;
    ctx.font = 'bold 24px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Core layout parameters
    const cx = 300;
    const cy = 220;
    const len = 80; // Represents the distance λ/2

    // Coordinates of the points
    const B = { x: cx, y: cy };
    const A = { x: cx - len, y: cy };
    const C = { x: cx + len, y: cy };
    const D = { x: cx, y: cy - len };
    
    // Coordinates of the receivers, positioned to match the layout in the original image
    const R1_dot = { x: A.x - 100, y: cy - 50 };
    const R2_dot = { x: B.x - 50, y: cy + 100 };

    // Helper function to draw a filled triangular arrowhead
    function drawArrowhead(ctx, x, y, angle, size) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2);
        ctx.lineTo(-size, size / 2);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }

    // --- Start Drawing ---

    // Draw the main lines with arrowheads from the center B
    const arrowSize = 16;
    
    // Line from B to A, arrow at A
    ctx.beginPath();
    ctx.moveTo(B.x, B.y);
    ctx.lineTo(A.x, A.y);
    ctx.stroke();
    drawArrowhead(ctx, A.x, A.y, Math.PI, arrowSize); // Arrow points left

    // Line from B to C, arrow at C
    ctx.beginPath();
    ctx.moveTo(B.x, B.y);
    ctx.lineTo(C.x, C.y);
    ctx.stroke();
    drawArrowhead(ctx, C.x, C.y, 0, arrowSize); // Arrow points right

    // Line from B to D, arrow at D
    ctx.beginPath();
    ctx.moveTo(B.x, B.y);
    ctx.lineTo(D.x, D.y);
    ctx.stroke();
    drawArrowhead(ctx, D.x, D.y, -Math.PI / 2, arrowSize); // Arrow points up

    // Draw the receiver points R1 and R2 as filled dots
    const dotRadius = 4.5;
    ctx.beginPath();
    ctx.arc(R1_dot.x, R1_dot.y, dotRadius, 0, 2 * Math.PI);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(R2_dot.x, R2_dot.y, dotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Draw labels for points A, B, C, D
    ctx.fillText('A', A.x - 20, A.y);
    ctx.fillText('B', B.x, B.y + 25);
    ctx.fillText('C', C.x + 20, C.y);
    ctx.fillText('D', D.x, D.y - 25);

    // Draw labels for receivers R1 and R2 using unicode subscripts for a clean look
    ctx.font = 'bold 26px sans-serif';
    ctx.fillText('R\u2081', R1_dot.x - 25, R1_dot.y);
    ctx.fillText('R\u2082', R2_dot.x - 25, R2_dot.y);

    // Draw the distance labels (λ/2)
    ctx.font = 'bold 22px sans-serif';
    const lambda = '\u03BB';
    const barWidth = 22;
    
    // Label for segment BA
    let x_frac1 = (A.x + B.x) / 2;
    let y_frac1 = A.y + 30;
    ctx.fillText(lambda, x_frac1, y_frac1 - 10);
    ctx.beginPath();
    ctx.moveTo(x_frac1 - barWidth / 2, y_frac1);
    ctx.lineTo(x_frac1 + barWidth / 2, y_frac1);
    ctx.stroke();
    ctx.fillText('2', x_frac1, y_frac1 + 14);

    // Label for segment BC
    let x_frac2 = (B.x + C.x) / 2;
    let y_frac2 = C.y + 30;
    ctx.fillText(lambda, x_frac2, y_frac2 - 10);
    ctx.beginPath();
    ctx.moveTo(x_frac2 - barWidth / 2, y_frac2);
    ctx.lineTo(x_frac2 + barWidth / 2, y_frac2);
    ctx.stroke();
    ctx.fillText('2', x_frac2, y_frac2 + 14);

    // Label for segment BD
    let x_frac3 = D.x + 30;
    let y_frac3 = (B.y + D.y) / 2;
    ctx.fillText(lambda, x_frac3, y_frac3 - 10);
    ctx.beginPath();
    ctx.moveTo(x_frac3 - barWidth / 2, y_frac3);
    ctx.lineTo(x_frac3 + barWidth / 2, y_frac3);
    ctx.stroke();
    ctx.fillText('2', x_frac3, y_frac3 + 14);

    // Draw the figure caption at the bottom
    ctx.font = 'bold 24px sans-serif';
    ctx.fillText('Fig. 4.2', cx, cy + 200);

</script>
</body>
</html>